<template>
    <div>
        <span style="font-size: 30px; font-weight: 20px">PersonBasic：</span
        ><input
            type="text"
            v-model="name"
            @keyup.enter="handAdd"
            placeholder="输入骚话后回车"
        />
        <ul>
            <li v-for="person in personList" :key="person.id">
                <div>{{ person.name }}</div>
                <div>{{ person.id }}</div>
                <hr />
            </li>
        </ul>
        <div class="foot">
            <span> 总数：{{ nol }} </span>
            <button @click="addPerson">点我随机添加</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "PersonBasic",
    data() {
        return {
            name: "",
        };
    },
    computed: {
        //   state中的值可以直接通过命名空间加属性名点出来
        personList() {
            return this.$store.state.personOption.personList;
        },
        // getters中的值需要通过数组的形式取出，因为存储的结构就是getters > personOption/nol
        nol() {
            console.log(this.$store);
            return this.$store.getters["personOption/nol"];
        },
    },
    methods: {
        handAdd() {
            this.$store.commit("personOption/ADD_PERSON", this.name);
        },
        addPerson() {
            this.$store.dispatch("personOption/addPerson");
        },
    },
};
</script>

<style>
.foot {
    float: right;
}
</style>
